/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 首页--大厅

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Carousel, Modal,
} from 'antd-mobile'


export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 广告栏数据
      adData: [
        {
          href: 'http://www.alipay.com',
          src: 'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
        },
        {
          href: 'http://www.alipay.com',
          src: 'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
        },
      ],
      // 播报栏数据
      broadcastData: [
        '恭喜 【胡渝】 7月30日大乐透中奖11111111111元7月30日大乐透中奖11111111111元',
        '恭喜 【胡渝】 7月30日大乐透中奖2222222222元',
        '恭喜 【胡渝】 7月30日大乐透中奖3333333333元',
        '恭喜 【胡渝】 7月30日大乐透中奖44444444元',
        '恭喜 【胡渝】 7月30日大乐透中奖5555555555元',
      ],
      // 热门推荐数据
      hotData: [
        {
          name: '瑞超',
          date: '7月15日 10:40',
          hostTeam: '哈马比',
          guestTeam: '呃斯特拉',
          guessNum: 888, // 竞猜人数
          victoryRate: 1.84, // 主胜赔率
          tieRate: 3.30, // 平赔率
          failRate: 3.84, // 负赔率
        },
        {
          name: '中超',
          date: '7月15日 10:40',
          hostTeam: '山东鲁能',
          guestTeam: '浙江舟山',
          guessNum: 88228, // 竞猜人数
          victoryRate: 1.84, // 主胜赔率
          tieRate: 3.30, // 平赔率
          failRate: 3.84, // 负赔率
        },
      ],
      // 彩种列表数据
      lotteryList: [
        {
          name: '竞彩足球',
          pathname: '/jczq',
          icon: 'jczq',
          stopSale: false, // 是否停售
          lotterying: false, // 是否正在开奖
        },
        {
          name: '超级大乐透',
          pathname: '/dlt',
          icon: 'dlt',
          stopSale: false, // 是否停售
          lotterying: true, // 是否正在开奖
        },
        {
          name: '七星彩',
          pathname: '/qxc',
          icon: 'qxc',
          stopSale: false, // 是否停售
          lotterying: false, // 是否正在开奖
        },
        {
          name: '排列3',
          pathname: '/pl3',
          icon: 'pl3',
          stopSale: false, // 是否停售
          lotterying: false, // 是否正在开奖
        },
        {
          name: '排列5',
          pathname: '/pl5',
          icon: 'pl5',
          stopSale: false, // 是否停售
          lotterying: false, // 是否正在开奖
        },
        {
          name: '胜负彩',
          pathname: '/sfc',
          icon: 'sfc',
          stopSale: false, // 是否停售
          lotterying: false, // 是否正在开奖
        },
        {
          name: '任选九场',
          pathname: '/rx9',
          icon: 'rx9',
          stopSale: false, // 是否停售
          lotterying: false, // 是否正在开奖
        },
        {
          name: '4场进球彩',
          pathname: '/jq4',
          icon: 'jq4',
          stopSale: false, // 是否停售
          lotterying: false, // 是否正在开奖
        },
      ],

      // 中奖列表，50条
      winList: [
        {
          name: '小白杨',
          date: '7月30日',
          lotteryType: '大乐透7月30日大乐透中奖11111111111元',
          num: 9999999,
        },
        {
          name: 'fsdffds',
          date: '7月30日',
          lotteryType: '4场进球彩',
          num: 32424543,
        },
        {
          name: 'fsdffds',
          date: '7月30日',
          lotteryType: '4场进球彩',
          num: 32424543,
        },
        {
          name: 'fsdffds',
          date: '7月30日',
          lotteryType: '4场进球彩',
          num: 32424543,
        },
        {
          name: 'fsdffds',
          date: '7月30日',
          lotteryType: '4场进球彩',
          num: 32424543,
        },
        {
          name: 'fsdffds',
          date: '7月30日',
          lotteryType: '4场进球彩',
          num: 32424543,
        },
      ],
    }
  }

  componentDidMount() {
    // 修复从其它页面跳转回来时热门推荐加长问题
    setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, 0)
  }

  /**
   * 点击一个彩种
   */
  onClickLottery=(item) => {
    console.log(item)
    if (item.stopSale) {
      // 已经停售
      Modal.alert('温馨提示', <div>抱歉，{item.name || '此彩种'}已停售，请持续关注。</div>, [
        { text: '知道了', onPress: () => {} },
      ])
      return
    }
    if (item.pathname) {
      this.props.history.push(item.pathname)
    }
  }


  /**
   * 点击更多，进入胜负彩页面
   */
  onClickMore=() => {
    this.props.history.push('/sfc')
  }

  render() {
    const {
      adData, broadcastData, hotData, lotteryList, winList,
    } = this.state
    return (
      <div className="page-wrap hall-wrap">
        <div className="header">
          <Carousel
            autoplay={false}
            infinite
            dots
          >
            {
              adData.map((val, index) => (
                <a
                  key={index.toString()}
                  href={val.href}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src={val.src} alt="" />
                </a>
              ))
            }
          </Carousel>
          <div className="broadcast-bar">
            <Carousel className="my-carousel"
              vertical
              dots={false}
              dragging={false}
              swiping={false}
              autoplay
              infinite
              autoplayInterval={2000}
              resetAutoplay={false}
            >
              {broadcastData.map((text, index) => (
                <div className="broadcast-item textOverflow" key={index.toString()}>{text}</div>
              ))}
            </Carousel>
          </div>
        </div>
        <WhiteSpace />
        <div className="hot-module">
          <div className="title-bar">
            <span>热门推荐</span>
            <span onClick={this.onClickMore}><span>更多</span><span className="app-icon icon-right" /></span>
          </div>
          <Carousel
            autoplay={false}
            infinite
            dots={false}
          >
            {
              hotData.map((val, index) => (
                <div
                  key={index.toString()}
                  className="hot-item"
                >
                  <div className="hot-header">
                    <span>
                      <span>{val.name}</span>
                      <span>{val.date}</span>
                    </span>
                    <span>{val.guessNum || 0}人竞猜</span>
                  </div>
                  <div className="hot-content">
                    <span>{val.hostTeam}</span>
                    <span className="app-icon icon-hot" />
                    <span>{val.guestTeam}</span>
                  </div>
                  <div className="hot-footer">
                    <span>主胜 {val.victoryRate}</span>
                    <span>平 {val.victoryRate}</span>
                    <span>主负 {val.victoryRate}</span>
                  </div>
                </div>
              ))
            }
          </Carousel>
        </div>
        <WhiteSpace />
        <div className="lottery-list">
          {
            lotteryList.map(((item, index) => {
              const result = (
                <div key={index.toString()} className={item.stopSale ? 'lottery-list-item stopScale' : 'lottery-list-item'} onClick={() => this.onClickLottery(item)}>
                  <img src={`resource/image/${item.icon}.png`} alt="" className="lotter-logo" />
                  <p className="lottery-list-item-name">{item.name}</p>
                  {
                    item.lotterying
                      ? <img src="resource/image/jrkj.png" alt="" className="flag-jrkj" />
                      : null
                  }
                  {/* {
                    item.stopSale
                      ? <p className="flag-ts">停售</p>
                      : null
                  } */}
                </div>
              )
              return result
            }))
          }
        </div>
        <WhiteSpace />
        <div className="win-list-box">
          <div className="title-bar">
            <span>中奖榜</span>
          </div>
          <div className="win-list">
            {
              winList.map((item, index) => {
                const result = (
                  <div className="win-list-item textOverflow" key={index.toString()}>
                    {`恭喜 【${item.name}】 ${item.date}${item.lotteryType}中奖 ${item.num}元`}
                  </div>
                )
                return result
              })
            }
          </div>
        </div>
      </div>
    )
  }
}
